/*
 * This script is for Analytics event tracking.
 * The below function is used for triggering on click event for Global Title Component.
 */

$(document)
		.ready(
				function() {
					$('.title-comp a')
							.off('click.titleDTMClick')
							.on(
									'click.titleDTMClick',
									function() {
										var value = $.trim($(this).text()), id = $(
												this).attr('id') ? $(this)
												.attr('id') : '', linkUrl = $(
												this).attr('href'), $sectionElement = $(
												this).closest('section'), pageSection = '', pageTitle = '';

										if ($(this).closest(
												'.productcomp-single-shelf').length) {
											$sectionElement = $(this)
													.closest(
															'.productcomp-single-shelf');
										} else if ($(this).closest(
												'.productcomp-multiple-shelf').length) {
											$sectionElement = $(this)
													.closest(
															'.productcomp-multiple-shelf');
										}

										pageTitle = $.trim($sectionElement.find(
												'.title-comp, .text-comp')
												.eq(0).text());
										pageTitle = pageTitle !== '' ? ' - '
												+ pageTitle : pageTitle;
										pageSection = $(this).closest(
												'[data-shelf-name]').attr(
												'data-shelf-name')
												+ pageTitle;
										try {
											globalUtil.triggerDtmScript('link',
													'Title Link', value,
													pageSection, id, linkUrl);
										} catch (e) {

										}
									});
				});
$(document).ready(function () {
	$(".hero_colors").each(function (index) {
		$(this).attr('data-content', $(this).text());
	})

	document.fonts.ready.then(function() {
		var titleLineHeight = '', height = '', updatedDom = '', isNoWrap = false;
		$(".hero_colors").each(function (index) {
			if ((($(this).attr('data-content').includes("-")) === true) && ($(window).width() < 400)) {
				isNoWrap = true;
				$(this).css("white-space", "nowrap");
			}
			titleLineHeight = $(this).css("line-height");
			height = $(this).height();
			updatedDom = '';
			wordBreakText = " ";
			lineBreakArray = [];
			lineHeight = parseInt(titleLineHeight);

			if ((height-4) > lineHeight) {
				$(this).html("");// empty
				var initialArray = $(this).attr('data-content').trim().split(/[" "]/);
				lineBreakArray = initialArray.reduce((acc, i) => i ? [...acc, i] : acc, []);
				var selectedWordClass = this.className;
				if (lineBreakArray.length > 1) {
					updatedDom = ' <span class = "' + selectedWordClass + '"> <em>'+lineBreakArray[0] + wordBreakText+' </em> </span><span class = "' + selectedWordClass +'"> <em>'+lineBreakArray[1]+ ' </em></span>';
					$(this).html(updatedDom);
				}
			} else {
				$(this).html("");// empty
				lineBreakArray = $(this).attr('data-content');
				var selectedWordClass = this.className;
				updatedDom = ' <span class = "' + selectedWordClass + '"> <em>'+lineBreakArray +' </em> </span>';
				$(this).html(updatedDom);
			}
			$('.herobanner .title-wrapper .hero_colors em').each(function(){
				var value ='';
				value = $(this).text().trim();
				$(this).html(value);
			})
			if (isNoWrap) {
				isNoWrap = false;
				$(this).css("white-space", "");
			}
		});
	}).catch(function(error) {
		console.log('font loading failed', error);
	});
})
$(document).ready(function () {
	$(".highlight_colors").each(function (index) {
		$(this).attr('data-content', $(this).text());
	})

	document.fonts.ready.then(function() {
		var titleLineHeight = '', height = '', updatedDom = '', isNoWrap = false;
		$(".highlight_colors").each(function (index) {
			if ((($(this).attr('data-content').includes("-")) === true) && ($(window).width() < 400)) {
				isNoWrap = true;
				$(this).css("white-space", "nowrap");
			}
			titleLineHeight = $(this).css("line-height");
			height = $(this).height();
			updatedDom = '';
			wordBreakText = " ";
			lineBreakArray = [];
			lineHeight = parseInt(titleLineHeight);

			if ((height-4) > lineHeight) {
				$(this).html("");// empty
				var initialArray = $(this).attr('data-content').trim().split(/[" "]/);
				lineBreakArray = initialArray.reduce((acc, i) => i ? [...acc, i] : acc, []);
				var selectedWordClass = this.className;
				if (lineBreakArray.length > 1) {
					updatedDom = ' <span class = "' + selectedWordClass + '"> <em>'+lineBreakArray[0] + wordBreakText+' </em> </span><span class = "' + selectedWordClass +'"> <em>'+lineBreakArray[1]+ ' </em></span>';
					$(this).html(updatedDom);
				}
			} else {
				$(this).html("");// empty
				lineBreakArray = $(this).attr('data-content');
				var selectedWordClass = this.className;
				updatedDom = ' <span class = "' + selectedWordClass + '"> <em>'+lineBreakArray +' </em> </span>';
				$(this).html(updatedDom);
			}
			$('.herobanner .title-wrapper .highlight_colors em').each(function(){
				var value ='';
				value = $(this).text().trim();
				$(this).html(value);
			})
			if (isNoWrap) {
				isNoWrap = false;
				$(this).css("white-space", "");
			}
		});
	}).catch(function(error) {
		console.log('font loading failed', error);
	});
	
	//to override the functionlity
    $(".title-comp.title_highlight").each(function (index) {
        $(this).find(".hero_colors").removeAttr('data-content');
        $(this).find(".hero_colors").contents().unwrap();
        $(this).find(".hero_colors").removeClass();
    });

    $(".title-comp.title_underline").each(function (index) {
        $(this).find(".highlight_colors").removeAttr('data-content');
        $(this).find(".highlight_colors").contents().unwrap();
        $(this).find(".highlight_colors").removeClass();
    });
})